<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.main{
				background: red;
				height: 100px;
				width: 100px;
				position: absolute;
				left: 0;
				top: 0;
			}
			
			.x{
				border: 1px solid black;
				height: 200px;
				width: 200px;
				position: absolute;
				left: 200px;
				top: 200px;
			}
		</style>
		<script>
			window.onload = function()
			{
				let div = document.querySelector('.main');
				let div2 = document.querySelector('.x');
				
				
				div.ondragstart = function()
				{
					console.log('1');
				}
				
				div.ondrag = function()
				{
					console.log('2')
				}
				
				div.ondragend = function()
				{
					console.log('3');
				}
				
				div2.ondragenter = function()
				{
					console.log('4');	
				}
				
				div2.ondragover = function(event)
				{
					console.log('5');
					event.preventDefault();
				}
			
				div2.ondragleave = function()
				{
					console.log('6');
				}
				
				div2.ondrop = function()
				{
					console.log('7');
				}
			}
		</script>
	</head>
	<body>
		<div class="main" draggable = "true"></div>
		<div class="x"></div>
	</body>
</html>